<%--
  Created by IntelliJ IDEA.
  User: 86188
  Date: 2025/3/20
  Time: 11:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
            integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
            crossorigin="anonymous"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教师工作台 - 学生考勤系统</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/teacher.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/common.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
<div class="teacher-container">
    <!-- 左侧导航栏 -->
    <aside class="sidebar">
        <div class="sidebar-header">
            <i class="fas fa-chalkboard-teacher"></i>
            <h2>教师工作台</h2>
        </div>
        <nav class="sidebar-nav">
            <ul>
                <li class="nav-item active" data-target="dashboard">
                    <i class="fas fa-home"></i> 主页
                </li>
                <li class="nav-item" data-target="course-management">
                    <i class="fas fa-book-open"></i> 授课管理
                    <ul class="submenu">
                        <li data-target="add-lecture">新增授课</li>
                        <li data-target="edit-lecture">修改授课</li>
                        <li data-target="delete-lecture">删除授课</li>
                    </ul>
                </li>
                <li class="nav-item" data-target="attendance">
                    <i class="fas fa-clipboard-check"></i> 考勤管理
                </li>
                <li class="nav-item" data-target="grades">
                    <i class="fas fa-chart-bar"></i> 成绩管理
                </li>
                <li class="nav-item" data-target="profile">
                    <i class="fas fa-user-circle"></i> 个人信息
                </li>
            </ul>
        </nav>
    </aside>

    <!-- 主内容区 -->
    <main class="content">
        <!-- 顶部操作栏 -->
        <header class="content-header">
            <div class="header-actions">
                <div class="profile-dropdown">
                    <button class="profile-btn">
                        <i class="fas fa-user-circle"></i> ${requestScope.teacher.name}
                        <i class="fas fa-caret-down"></i>
                    </button>
                    <div class="dropdown-menu">

                        <a href="ChangePasswordController">修改密码</a>
                        <a href="${pageContext.request.contextPath}/login.jsp">退出登录</a>
                    </div>
                </div>
            </div>
        </header>

        <!-- 动态内容区域 -->
        <div class="dynamic-content">
            <!-- 主页（默认显示） -->
            <section id="dashboard" class="content-section active">
                <h3><i class="fas fa-tachometer-alt"></i> 教学概览</h3>
                <div class="stats-grid">
                    <div class="stat-card">
                        <i class="fas fa-users"></i>
                        <span class="stat-value">10</span>
                        <span class="stat-label">在授学生</span>
                    </div>
                    <div class="stat-card">
                        <i class="fas fa-book"></i>
                        <span class="stat-value">2</span>
                        <span class="stat-label">当前课程</span>
                    </div>
                </div>
            </section>
            <!-- 新增授课模块 -->
            <section id="add-lecture" class="content-section">
                <div class="creation-card">
                    <!-- 卡片头部 -->
                    <div class="card-header creation-header">
                        <i class="fas fa-chalkboard"></i>
                        <h3>新增教学安排</h3>
                        <div class="header-tips">
                            <i class="fas fa-info-circle"></i>
                            <span>带 <span class="required">*</span> 号为必填项</span>
                        </div>
                    </div>

                    <!-- 卡片主体 -->
                    <div class="card-body">
                        <form class="advanced-lecture-form"
<%--                              action="${pageContext.request.contextPath}/AddLectureController"--%>
<%--                              method="post"--%>
                        >
                            <!-- 这个隐藏字段会接收课程ID -->
                            <input type="hidden" name="courseId" id="selectedCourseId">
<%--                            会接受班级名称--%>
                            <input type="hidden" name="className" maxlength="20">
                            <div class="form-grid">
                                <!-- 左栏 -->
                                <div class="form-column">
                                    <div class="form-group">
                                        <label>选择课程 <span>*</span></label>
                                        <div class="course-selector" data-required="true">
                                            <div class="selected-course">
                                                <i class="fas fa-book-open"></i>
                                                <span>请选择课程</span>
                                                <i class="fas fa-chevron-down"></i>
                                            </div>
                                            <div class="course-list">
                                                <c:forEach items="${requestScope.courses}" var="course">
                                                    <div class="course-item" data-course-id="${course.courseId}">
                                                        <span class="course-code">${course.courseCode}</span>
                                                        <span class="course-name">${course.courseName}</span>
                                                        <span class="course-credit">${course.credit}学分</span>
                                                    </div>
                                                </c:forEach>
                                            </div>
                                            <div class="error-msg" style="display:none;">请选择课程</div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label>教学班级 <span class="required">*</span></label>
                                        <div class="input-with-icon">
                                            <i class="fas fa-users-class"></i>
                                            <select class="styled-select" name="classId" required>
                                                <option value="" disabled selected>请选择班级</option>
                                                <c:forEach items="${requestScope.lecture}" var="lecture">
                                                    <option value="${lecture.courseId}"
                                                            data-class="${lecture.className}">
                                                            ${lecture.className}
                                                    </option>
                                                </c:forEach>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <!-- 右栏 -->
                                <div class="form-column">
                                    <div class="form-group">
                                        <label>授课时间 <span class="required">*</span></label>
                                        <div class="datetime-picker">
                                            <input type="datetime-local"
                                                   name="lectureTime"
                                                   required
                                                   class="styled-datetime">
                                            <i class="fas fa-calendar-alt"></i>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label>教室安排 <span class="required">*</span></label>
                                        <div class="input-with-icon">
                                            <i class="fas fa-map-marker-alt"></i>
                                            <input type="text"
                                                   name="classroom"
                                                   placeholder="例：逸夫楼305"
                                                   required
                                                   pattern="[\u4e00-\u9fa5]{2,4}\d{3}">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 附加信息 -->
                            <div class="form-group full-width">
                                <label>授课内容概要</label>
                                <label>
<textarea class="lecture-summary"
          name="summary"
          required
          placeholder="输入本次课程的主要内容..."
          rows="3"
          style="white-space: pre-wrap;">
</textarea>
                                </label>
                            </div>

                            <!-- 表单操作 -->
                            <div class="form-actions">
                                <button type="reset" class="btn-reset">
                                    <i class="fas fa-redo-alt spin-on-hover"></i> 重置表单
                                </button>
                                <button type="button" class="btn-submit" id="createLectureBtn" >
                                    <i class="fas fa-plus-circle"></i> 创建授课计划
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </section>
            <!-- 修改授课模块 -->
            <section id="edit-lecture" class="content-section">
                <div class="edit-course-card">
                    <!-- 卡片头部 -->
                    <div class="card-header edit-header">
                        <i class="fas fa-edit"></i>
                        <h3>授课信息调整</h3>

                    </div>

                    <!-- 卡片主体 -->
                    <div class="card-body">
                        <form class="lecture-edit-form">
                            <div class="form-grid">
                                <!-- 左栏 -->
                                <div class="form-column">
                                    <div class="form-group">
                                        <label>课程信息</label>
                                        <div class="course-info-display">
                                            <c:choose>
                                                <c:when test="${not empty requestScope.courses}">
                                                    <c:forEach items="${requestScope.courses}" var="course">
                                                        <div class="course-badge"
                                                             data-course-id="${course.courseId}">
                                                            <span class="course-code2">${course.courseCode}</span>
                                                            <span class="course-name">${course.courseName}</span>
                                                        </div>
                                                    </c:forEach>
                                                </c:when>
                                                <c:otherwise>
                                                    <div class="no-course">暂无授课安排</div>
                                                </c:otherwise>
                                            </c:choose>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label>调整班级 <span class="required">*</span></label>
                                        <div class="input-with-icon">
                                            <i class="fas fa-users-class"></i>
                                            <select class="styled-select" name="update_className">
                                                <c:forEach items="${requestScope.lecture}" var="lecture">
                                                    <option value="${lecture.className}"
                                                            data-class="${lecture.className}">
                                                            ${lecture.className}
                                                    </option>
                                                </c:forEach>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <!-- 右栏 -->
                                <div class="form-column">
                                    <div class="form-group">
                                        <label>授课时间 <span class="required">*</span></label>
                                        <div class="datetime-picker">
                                            <input type="datetime-local"
                                                   name="lectureTime"
                                                   value="2025-03-25T14:00"
                                                   required
                                                   class="styled-datetime">
                                            <i class="fas fa-calendar-alt"></i>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label>教室调整 <span class="required">*</span></label>
                                        <div class="input-with-icon">
                                            <i class="fas fa-map-marker-alt"></i>
                                            <input type="text"
                                                   name="classroom"
                                                   value="逸夫楼305"
                                                   required
                                                   pattern="[\u4e00-\u9fa5]{2,4}\d{3}">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 授课内容编辑区 -->
                            <div class="content-editor">
                                <h4><i class="fas fa-book-open"></i> 课程内容修改</h4>
                                <div class="form-group">
                                    <label>授课大纲 <span class="required">*</span></label>
                                    <div class="input-with-icon">
                                        <i class="fas fa-heading"></i>
                                        <input type="text"
                                               name="courseTitle"
                                               value="Java编程基础"
                                               required
                                               placeholder="请输入课程标题">
                                    </div>
                                </div>




                            </div>


                            <!-- 表单操作 -->
                            <div class="form-actions">
                                <button type="button" class="lecture-btn-cancel">
                                    <i class="fas fa-times-circle"></i> 取消修改
                                </button>
                                <button type="button" class="btn-submit">
                                    <i class="fas fa-check-double"></i> 确认调整
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </section>
            <!-- 删除授课模块 -->
            <section id="delete-lecture" class="content-section">
                <div class="danger-card">
                    <!-- 卡片头部 -->
                    <div class="card-header danger-header">
                        <i class="fas fa-trash-alt"></i>
                        <h3>授课计划管理</h3>
                        <div class="header-tips">
                            <i class="fas fa-exclamation-circle"></i>
                            <span>删除操作不可逆，请谨慎操作</span>
                        </div>
                    </div>

                    <!-- 卡片主体 -->
                    <div class="card-body">
                        <!-- 筛选工具栏 -->
<%--                        <div class="filter-bar">--%>
<%--                            <div class="filter-group">--%>
<%--                                <label>时间范围：</label>--%>
<%--                                <input type="date" class="filter-date" id="startDate">--%>
<%--                                <span>至</span>--%>
<%--                                <input type="date" class="filter-date" id="endDate">--%>
<%--                            </div>--%>
<%--                            <button class="btn-filter">--%>
<%--                                <i class="fas fa-filter"></i> 筛选--%>
<%--                            </button>--%>
<%--                        </div>--%>

                        <!-- 授课列表 -->
                        <div class="lecture-list">
                            <table class="danger-table">
                                <thead>
                                <tr>
                                    <th>
                                        <input type="checkbox" class="check-all">
                                    </th>
                                    <th>授课时间</th>
                                    <th>课程名称</th>
                                    <th>授课班级</th>
                                    <th>教室</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <c:forEach items="${requestScope.lectures}" var="delete_lecture">
                                    <tr data-lecture-id="${delete_lecture.lectureId}">
                                        <td>
                                            <input type="checkbox" class="lecture-check">
                                        </td>
                                        <td>
                                            <fmt:parseDate value="${fn:replace(delete_lecture.lectureTime, 'T', ' ')}"
                                                           pattern="yyyy-MM-dd HH:mm"
                                                           var="parsedDate"/>
                                            <fmt:formatDate value="${parsedDate}" pattern="yyyy-MM-dd HH:mm"/>
                                        </td>
                                        <td>${delete_lecture.courseName}</td>
                                        <td>${delete_lecture.className}</td>
                                        <td>${delete_lecture.classroom}</td>
                                        <td>
                                    <span class="status-badge ${delete_lecture.status}">
                                        <c:choose>
                                            <c:when test="${delete_lecture.status == 'SCHEDULED'}">已安排</c:when>
                                            <c:when test="${delete_lecture.status == 'COMPLETED'}">已完成</c:when>
                                            <c:otherwise>已取消</c:otherwise>
                                        </c:choose>
                                    </span>
                                        </td>
                                        <td>
                                            <button class="btn-delete"
                                                    data-lecture-id="${delete_lecture.lectureId}"
                                                    data-lecture-name="${delete_lecture.courseName}">
                                                <i class="fas fa-trash"></i> 删除
                                            </button>
                                        </td>
                                    </tr>
                                </c:forEach>
                                </tbody>
                            </table>
                        </div>

                        <!-- 批量操作面板 -->
                        <div class="batch-actions">
                            <div class="selected-count">
                                已选择 <span class="count">0</span> 项
                            </div>
                            <button class="btn-batch-delete" disabled>
                                <i class="fas fa-trash-restore-alt"></i> 批量删除
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 删除确认模态框 -->
<%--                <div class="delete-modal">--%>
<%--                    <div class="modal-content">--%>
<%--                        <div class="modal-header">--%>
<%--                            <h4><i class="fas fa-exclamation-triangle"></i> 确认删除</h4>--%>
<%--                            <button class="btn-close">&times;</button>--%>
<%--                        </div>--%>
<%--                        <div class="modal-body">--%>
<%--                            <p>确定要删除选中的 <span class="delete-count">0</span> 项授课安排吗？</p>--%>
<%--                            <div class="modal-actions">--%>
<%--                                <button class="btn-cancel">取消</button>--%>
<%--                                <button class="btn-confirm">确认删除</button>--%>
<%--                            </div>--%>
<%--                        </div>--%>
<%--                    </div>--%>
<%--                </div>--%>
            </section>




            <!-- 考勤管理模块 -->
            <section id="attendance" class="content-section">
                <div class="attendance-card">
                    <!-- 卡片头部 -->
                    <div class="card-header attendance-header">
                        <i class="fas fa-clipboard-list"></i>
                        <h3>考勤综合管理</h3>
<%--                        <div class="header-actions">--%>
<%--                            <button class="btn-export">--%>
<%--                                <i class="fas fa-file-export"></i> 导出报表--%>
<%--                            </button>--%>
<%--                        </div>--%>
                    </div>

                    <!-- 统计概览 -->
<%--                    <div class="attendance-stats">--%>
<%--                        <div class="stat-item">--%>
<%--                            <div class="stat-icon today">--%>
<%--                                <i class="fas fa-calendar-day"></i>--%>
<%--                            </div>--%>
<%--&lt;%&ndash;                            <div class="stat-info">&ndash;%&gt;--%>
<%--&lt;%&ndash;                                <span class="label">今日考勤率</span>&ndash;%&gt;--%>
<%--&lt;%&ndash;                                <span class="value">95.6%</span>&ndash;%&gt;--%>
<%--&lt;%&ndash;                            </div>&ndash;%&gt;--%>
<%--                        </div>--%>
<%--                        <div class="stat-item">--%>
<%--                            <div class="stat-icon week">--%>
<%--                                <i class="fas fa-chart-line"></i>--%>
<%--                            </div>--%>
<%--&lt;%&ndash;                            <div class="stat-info">&ndash;%&gt;--%>
<%--&lt;%&ndash;                                <span class="label">本周平均</span>&ndash;%&gt;--%>
<%--&lt;%&ndash;                                <span class="value">93.2%</span>&ndash;%&gt;--%>
<%--&lt;%&ndash;                            </div>&ndash;%&gt;--%>
<%--                        </div>--%>
<%--                    </div>--%>

                    <!-- 增强型表格 -->
                    <div class="attendance-table">
                        <table class="enhanced-table">
                            <thead>
                            <tr>
                                <th>日期</th>
                                <th>班级信息</th>
                                <th>课程信息</th>
                                <th class="mobile-hide">应到人数</th>
                                <th class="mobile-hide">实到人数</th>
                                <th>出勤率</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <c:forEach items="${requestScope.AttendanceDetail}" var="attendanceDetail">
                                <tr data-attendance-id="${attendanceDetail.attendanceDetailId}"
                                    data-status="${attendanceDetail.attendanceDetailEnum}">

                                    <td> <fmt:parseDate value="${fn:replace(attendanceDetail.attendanceDetailTime, 'T', ' ')}"
                                                        pattern="yyyy-MM-dd HH:mm"
                                                        var="parsedDate"/>
                                        <fmt:formatDate value="${parsedDate}" pattern="yyyy-MM-dd HH:mm"/></td>
                                    <td>
                                        <div class="course-info">
                                            <div class="course-name">${attendanceDetail.attendanceDetailClass}</div>
<%--                                            <div class="course-time">${attendanceDetail.attendanceDetailTime}</div>--%>
                                        </div>
                                    </td>
                                    <td class="mobile-hide">${attendanceDetail.attendanceDetailCourse}</td>
                                    <td class="mobile-hide">${attendanceDetail.attendanceDetailPerson}</td>
                                    <td class="mobile-hide">${attendanceDetail.attendanceDetailActual}</td>
                                    <td>
                                        <div class="progress-bar">
                                            <div class="progress" style="width: ${attendanceDetail.attendanceDetailRate}%"></div>
                                            <span>${attendanceDetail.attendanceDetailRate}%</span>
                                        </div>
                                    </td>
                                    <td>
                                <span class="status-badge ${attendanceDetail.attendanceDetailEnum}">
                                    <c:choose>
                                        <c:when test="${attendanceDetail.attendanceDetailEnum == 'PENDING'}">待开始</c:when>
                                        <c:when test="${attendanceDetail.attendanceDetailEnum == 'COMPLETED'}">已结束</c:when>
                                        <c:otherwise>已取消</c:otherwise>
                                    </c:choose>
                                </span>
                                    </td>
                                    <td>
                                        <div class="table-actions">
                                            <button class="btn-detail" data-id="${attendanceDetail.attendanceDetailId}"
                                            data-course="${attendanceDetail.attendanceDetailCourse}" data-time="${attendanceDetail.attendanceDetailTime}">
                                                <i class="fas fa-eye"></i>
                                            </button>
<%--                                            <button class="btn-edit" data-id="${attendanceDetail.attendanceDetailId}">--%>
<%--                                                <i class="fas fa-edit"></i>--%>
<%--                                            </button>--%>
<%--                                            <button class="btn-archive" data-id="${attendanceDetail.attendanceDetailId}">--%>
<%--                                                <i class="fas fa-archive"></i>--%>
<%--                                            </button>--%>
                                        </div>
                                    </td>
                                </tr>
                            </c:forEach>
                            </tbody>
                        </table>
                    </div>
                </div>
            </section>

            <!-- 考勤详情模态框 -->
            <div class="attendance-modal">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4>考勤详情</h4>
                        <button class="btn-close">&times;</button>
                    </div>
                    <div class="modal-body">
                        <!-- 动态加载详情内容 -->
                    </div>
                </div>
            </div>

            <!-- 成绩管理模块 -->
            <section id="grades" class="content-section">
                <div class="grades-card">
                    <!-- 卡片头部 -->
                    <div class="card-header grades-header">
                        <i class="fas fa-star-half-alt"></i>
                        <h3>成绩综合分析</h3>
<%--                        <div class="header-actions">--%>
<%--                            <button class="btn-import">--%>
<%--                                <i class="fas fa-file-import"></i> 导入成绩--%>
<%--                            </button>--%>
<%--                            <button class="btn-export">--%>
<%--                                <i class="fas fa-file-export"></i> 导出报表--%>
<%--                            </button>--%>
<%--                        </div>--%>
                    </div>

                    <!-- 统计概览 -->
                    <div class="grades-stats">
                        <div class="stat-card">
                            <div class="stat-icon">
                                <i class="fas fa-user-graduate"></i>
                            </div>
                            <div class="stat-info">
                                <span class="label">平均分</span>
                                <span class="value">83.5</span>
                            </div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon">
                                <i class="fas fa-percentage"></i>
                            </div>
                            <div class="stat-info">
                                <span class="label">及格率</span>
                                <span class="value">96.7%</span>
                            </div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon">
                                <i class="fas fa-chart-line"></i>
                            </div>
                            <div class="stat-info">
                                <span class="label">最高分</span>
                                <span class="value">98</span>
                            </div>
                        </div>
                    </div>

                    <!-- 可视化图表 -->
<%--                    <div class="charts-container">--%>
<%--                        <div class="chart-card">--%>
<%--                            <h4><i class="fas fa-chart-pie"></i> 成绩分布</h4>--%>
<%--                            <canvas id="gradeDistribution"></canvas>--%>
<%--                        </div>--%>
<%--                        <div class="chart-card">--%>
<%--                            <h4><i class="fas fa-chart-bar"></i> 分数段统计</h4>--%>
<%--                            <canvas id="scoreRanges"></canvas>--%>
<%--                        </div>--%>
<%--                    </div>--%>

                    <!-- 增强型表格 -->
                    <div class="grades-table">
                        <div class="table-toolbar">
                            <div class="search-box">
                                <i class="fas fa-search"></i>
                                <input type="text" placeholder="搜索学生姓名或学号...">
                            </div>
                            <div class="filter-group">
                                <select class="course-filter">
                                    <option>全部课程</option>
                                    <c:forEach items="${requestScope.courses}" var="course">
                                        <option value="${course.courseName}">${course.courseName}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>

                        <table class="enhanced-table">
                            <thead>
                            <tr>
                                <th>学号</th>
                                <th>姓名</th>
                                <th>课程名称</th>
                                <th>平时成绩</th>
                                <th>期末成绩</th>
                                <th>总评成绩</th>
<%--                                <th>操作</th>--%>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>2023001</td>
                                <td>张三</td>
                                <td>Java程序设计</td>
                                <td>85</td>
                                <td>90</td>
                                <td class="total-score">88</td>
                                <td>
                                    <button class="btn-edit"><i class="fas fa-edit"></i></button>
                                    <button class="btn-detail"><i class="fas fa-info-circle"></i></button>
                                </td>
                            </tr>
                            <!-- 更多数据行 -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </section>





        <%--个人信息--%>
            <!-- 在dynamic-content区域更新个人信息模块 -->
            <section id="profile" class="content-section">
                <div class="profile-card">
                    <!-- 卡片头部 -->
                    <div class="card-header profile-header">
                        <i class="fas fa-id-card"></i>
                        <h3>个人信息管理</h3>
                        <div class="header-actions">
<%--                            <button class="btn-edit-profile">--%>
<%--                                <i class="fas fa-edit"></i> 编辑信息--%>
<%--                            </button>--%>
                        </div>
                    </div>

                    <!-- 卡片主体 -->
                    <div class="card-body">
                        <div class="profile-content">
                            <!-- 左侧头像区 -->
                            <div class="avatar-section">
                                <div class="avatar-upload">
                                    <div class="avatar-preview">
                                        <img src="${pageContext.request.contextPath}/static/image/teacher-default-avatar.png"
                                             alt="用户头像"
                                             id="avatarPreview">
                                    </div>
                                    <div class="upload-controls">
                                        <input type="file"
                                               id="avatarInput"
                                               accept="image/*"
                                               hidden>
                                        <label for="avatarInput" class="btn-upload">
                                            <i class="fas fa-camera"></i> 更换头像
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <!-- 右侧信息区 -->
                            <div class="info-section">
                                <!-- 基本信息 -->
                                <div class="info-group">
                                    <h4><i class="fas fa-user-tie"></i> 基本信息</h4>
                                    <dl class="info-grid">
                                        <dt>工号</dt>
                                        <dd>${requestScope.teacher.employeeId}</dd>
                                        <dt>姓名</dt>
                                        <dd>${requestScope.teacher.name}</dd>
                                        <dt>学院</dt>
                                        <dd>${requestScope.teacher.department}</dd>
                                        <dt>职称</dt>
                                        <dd>${requestScope.teacher.title}</dd>
                                    </dl>
                                </div>

                                <!-- 联系信息 -->
                                <div class="info-group">
                                    <h4><i class="fas fa-address-book"></i> 联系信息</h4>
                                    <dl class="info-grid">
                                        <dt>电子邮箱</dt>
                                        <dd>${requestScope.teacher.email}</dd>
                                        <dt>联系电话</dt>
                                        <dd>${requestScope.teacher.phone}</dd>
                                        <dt>办公室</dt>
                                        <dd>${requestScope.teacher.office}</dd>
                                    </dl>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </section>


        </div>
    </main>
</div>

<script src="${pageContext.request.contextPath}/static/js/teacher.js"></script>
<script src="${pageContext.request.contextPath}/static/js/common.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lectures.js"></script>
<script src="${pageContext.request.contextPath}/static/js/attendance.js"></script>
<script src="${pageContext.request.contextPath}/static/js/Grades.js"></script>

</body>
</html>

